<template>
    <div class="chat-wrapper">
        <div class="title">聊天区</div>
        <div class="search-box">
            <input class="search-input" type="text" placeholder="输入搜索内容">
            <button class="search-btn">搜索</button>
        </div>
        <ul class="chat-list">
            <li class="chat-item" v-for="(item, index) in chatList" :key="index" :data-id="index" @click="openChat($event)">
                <img class="chat-avatar" :src="item.avatar" alt="头像">
                <div class="chat-content">
                    <ul class="chat-title-wrapper">
                        <li>{{item.name}}</li>
                        <li class="chat-date">{{item.date}}</li>
                    </ul>
                    <div class="chat-comment">{{item.chatname}}</div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                chatList: [
                    {
                        name: 'Yolo系列',
                        avatar: 'https://img0.baidu.com/it/u=251289958,1860898046&fm=26&fmt=auto&gp=0.jpg',
                        chatname: '深入浅出Yolo系列之Yolov5核心基础知识完整讲解',
                        date: '刚刚',
                    }, {
                        name: 'Pytorch搭建YoloV4',
                        avatar: 'https://img2.baidu.com/it/u=3649178992,1821853682&fm=26&fmt=auto&gp=0.jpg',
                        chatname: '睿智的目标检测30——Pytorch搭建YoloV4目标检测平台',
                        date: '1分钟前',
                    }, {
                        avatar: 'https://img2.baidu.com/it/u=2745483551,130647108&fm=26&fmt=auto&gp=0.jpg',
                        name: '手势识别',
                        chatname: '基于OpenCV的手势识别完整项目（Python3.7）',
                        date: '6分钟前'
                    }, {
                        avatar: 'https://img0.baidu.com/it/u=3826142549,889292993&fm=11&fmt=auto&gp=0.jpg',
                        name: 'YOLO系列算法精讲',
                        chatname: 'YOLO系列算法精讲：从yolov1至yolov4的进阶之路（呕心沥血2万字超全整理，建议收藏！）',
                        date: '12分钟前',
                    }, {
                        avatar: 'https://img2.baidu.com/it/u=718132922,3181918314&fm=11&fmt=auto&gp=0.jpg',
                        name: '数据集实现猫猫识别',
                        chatname: 'YOLOv5 实现目标检测（训练自己的数据集实现猫猫识别）',
                        date: '21分钟前',
                    }, {
                        avatar: 'https://img2.baidu.com/it/u=1520770465,16266424&fm=11&fmt=auto&gp=0.jpg',
                        name: 'Linux',
                        chatname: 'Linux命令大全（排版清晰！！持续更新！！非常详细）',
                        date: '39分钟前',
                    }, {
                        avatar: 'https://img1.baidu.com/it/u=3755724818,493016084&fm=11&fmt=auto&gp=0.jpg',
                        name: 'Python爬虫',
                        chatname: '用Python解决女朋友看电影没字幕的需求',
                        date: '59分钟前',
                    }, {
                        avatar: 'https://img2.baidu.com/it/u=2253276185,1761149223&fm=26&fmt=auto&gp=0.jpg',
                        name: '面部表情识别',
                        chatname: 'Pytorch实现基于卷积神经网络的面部表情识别(详细步骤)',
                        date: '2小时前',
                    },
                ]
            }
        },
        methods: {
            data(){
              return {
                  roomChat:[
                      {
                          chatName:'java后端交流',
                          time:'20分钟前',
                          comment:'加个@EnableEurekaServer注解，表示是一个服务注册中心'
                      },
                      {
                          chatName:'java后端交流',
                          time:'20分钟前',
                          comment:'加个@EnableEurekaServer注解，表示是一个服务注册中心'
                      },
                      {
                          chatName:'java后端交流',
                          time:'20分钟前',
                          comment:'加个@EnableEurekaServer注解，表示是一个服务注册中心'
                      },
                      {
                          chatName:'java后端交流',
                          time:'20分钟前',
                          comment:'加个@EnableEurekaServer注解，表示是一个服务注册中心'
                      },
                      {
                          chatName:'java后端交流',
                          time:'20分钟前',
                          comment:'加个@EnableEurekaServer注解，表示是一个服务注册中心'
                      },
                      {
                          chatName:'java后端交流',
                          time:'20分钟前',
                          comment:'加个@EnableEurekaServer注解，表示是一个服务注册中心'
                      },
                      {
                          chatName:'java后端交流',
                          time:'20分钟前',
                          comment:'加个@EnableEurekaServer注解，表示是一个服务注册中心'
                      },
                  ]
              }
            },
            openChat (e) {
                console.log(e)
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "../../common/scss/variable";
    @import "../../common/scss/mixin";

    .chat-wrapper {
        width: 100%;
        margin-top: 4px;
        padding-top: 20px;
        box-sizing: border-box;
        line-height: 20px;
        background-color: #ffffff;
        color: rgb(16, 16, 16);
        font-size: 14px;
        text-align: center;
        .title {
            height: 29px;
            margin-bottom: 14px;
            line-height: 29px;
            color: rgb(136, 129, 129);
            font-size: 20px;
        }
        .search-box {
            display: grid;
            grid-template-columns: 281fr 48fr;
            grid-template-rows: 34px;
            grid-column-gap: 3px;
            width: 100%;
            padding: 0 12px;
            box-sizing: border-box;
            .search-input {
                height: 34px;
                padding: 0 14px;
                border-radius: 17px;
                background-color: rgb(242, 242, 247);
                color: rgb(136, 129, 129);
                font-size: 14px;
                border: 1px solid #ffffff;
                &:focus {
                    border: none;
                    outline: none;
                }
            }
            .search-btn {
                height: 33px;
                border-radius: 20px;
                background-color: rgb(243, 243, 243);
                color: rgb(16, 16, 16);
                font-size: 14px;
                border: 1px solid #ffffff;
                &:focus {
                    border: none;
                    outline: none;
                }
            }
        }
        .chat-list {
            width: 100%;
            padding: 18px 18px 54px;
            box-sizing: border-box;
            .chat-item {
                display: grid;
                grid-template-columns: 34fr 276fr;
                grid-column-gap: 8px;
                cursor: pointer;
                .chat-avatar {
                    width: 34px;
                    height: 34px;
                    border-radius: 50%;
                }
                .chat-content {
                    max-width: 279px;
                    padding: 6px 0 14px;
                    box-sizing: border-box;
                    border-bottom: 1px solid rgb(242, 242, 247);
                    .chat-title-wrapper {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        color: rgb(44, 43, 43);
                        font-size: 14px;
                        margin-bottom: 3px;
                        line-height: 20px;
                        .chat-date {
                            color: rgb(199, 199, 204);
                        }
                    }
                    .chat-comment {
                        @include no-wrap;
                        height: 18px;
                        line-height: 18px;
                        color: rgb(136, 129, 129);
                        font-size: 13px;
                        text-align: left;
                    }
                }
            }
        }
    }
</style>
